<!--
  - Copyright (c) 2018-2019.
  -  This file is part of the moonpie production
  -  (c) johnzhang <875010341@qq.com>
  -  This source file is subject to the MIT license that is bundled
  -  with this source code in the file LICENSE.
  -->
<template>
    <form class="am-form wechat-logging-form" method="post" v-bind:action="initConfig.saveUrl">
        <fieldset>
            <div class="am-form-group">
                <label class="am-form-label col-sm-2">日志引擎</label>
                <div class="col-sm-10">
                    <select class="am-select" v-model="config.loggingType">
                        <option v-bind:value="item.id" v-bind:key="item.id"
                                v-for="item in supportedTypes.labels">{{item.title}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-form-label col-sm-2">日志级别</label>
                <div class="col-sm-10">
                    <select class="am-select" v-model="config.loggingData.level">
                        <option v-bind:value="item.id" v-bind:key="item.id"
                                v-for="item in supportedTypes.levels">{{item.title}}
                        </option>
                    </select>
                </div>
            </div>
            <div class="am-form-group" v-for="formElement in validFormElements">
                <label class="am-form-label col-sm-2">{{formElement.label}}</label>
                <div class="col-sm-10">
                    <input class="am-form-field" v-bind:type="formElement.type"
                           v-bind:placeholder="formElement.placeholder"
                           v-model="config.loggingData[formElement.field]" />
                </div>
            </div>
            <div class="am-form-group">
                <div class="am-u-sm-push-2 am-u-sm-9">
                    <button class="am-btn am-btn-secondary" type="submit">保存</button>
                </div>
            </div>
        </fieldset>
    </form>
</template>

<script>
  import _ from 'lodash'

  export default {
    name: "WechatLoggingConfig",
    props: ['initConfig'],
    computed: {
      validFormElements: function () {
        const id = this.config.loggingType
        return _.get(_.find(this.supportedTypes.structures, {id}), 'items', [])
      }
    },
    mounted() {
      const $form = $(this.$el)
      $form.superForm({
        buildData: () => {
          return _.assign({}, {config: this.config}, {scope: 'logging'})
        }
      })
    },
    data() {
      return {
        config: {
          loggingType: this.initConfig.loggingType,
          loggingData: this.initConfig.loggingData
        },
        supportedTypes: {
          labels: [
            {id: 'single', title: '单一日志'},
            {id: 'daily', title: '日期日志'}
          ],
          levels: [
            {id: 'debug', title: '调试级别'},
            {id: 'info', title: '普通信息'},
            {id: 'notice', title: '注意信息'},
            {id: 'warning', title: '异常警告'},
            {id: 'error', title: '错误'},
            {id: 'critical', title: '严重错误'},
            {id: 'alert', title: '警戒提醒'},
            {id: 'emergency', title: '紧急错误'}
          ],
          structures: [
            {
              id: 'single',
              items: [
                {
                  field: 'path',
                  label: '日志文件名',
                  type: 'text',
                  placeholder: '日志文件名，根目录在系统日志目录下',
                  'required': true
                }
              ]
            },
            {
              id: 'daily',
              items: [
                {
                  field: 'path',
                  label: '日志文件名',
                  type: 'text',
                  placeholder: '日志文件名，根目录在系统日志目录下',
                  'required': true
                },
                {
                  field: 'days',
                  label: '间隔天数',
                  type: 'number',
                  placeholder: '请填写间隔天数',
                  'required': true,
                  default: 7
                }
              ]
            }
          ]
        }
      }
    }
  }
</script>

<style scoped>

</style>